<template>
    <div class="search_input">
        <el-input
            style="width: 280px"
            v-model="searchKeyWord"
            class="keyword"
            placeholder="请输入员工昵称"
            :suffix-icon="Search" />
        <el-button @click="batchSet" :disabled="customer.length == 0">批量设置</el-button>
    </div>
    <el-table
        max-height="430"
        ref="multipleTableRef"
        :data="filterData"
        stripe
        style="min-width: 960px; max-height: 422px"
        @selection-change="handleSelectionChange"
        class="tableData"
        :header-cell-style="{ background: '#F9F9F9', color: '#33302D' }">
        <el-table-column type="selection" width="55" />
        <el-table-column :label="`共${filterData.length}个员工`">
            <template #default="scope">
                <div class="cusInfo">
                    <el-image class="avatar" :src="scope.row.avatar">
                        <template #error>
                            <div class="image-slot">
                                <el-icon>
                                    <icon-picture />
                                </el-icon>
                            </div>
                        </template>
                    </el-image>
                    <div class="name" v-if="scope.row.name">{{ scope.row.name }}</div>
                    <!-- <div class="name" v-if="scope.row.user_name">{{ scope.row.user_name }}</div> -->
                </div>
            </template>
        </el-table-column>
        <el-table-column label="每日添加客户上限" width="160" align="center">
            <template #default="scope">
                <div class="handle">
                    <el-input-number
                        v-model="scope.row.limit"
                        class="mx-4"
                        min="0"
                        controls-position="right"
                        @change="handleChange(scope.row)" />
                </div>
            </template>
        </el-table-column>
        <template #empty>
            <div style="height: 500px" class="emty">
                <img class="emty_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">{{ list || '暂无数据' }}</div>
            </div>
        </template>
    </el-table>
    <Dialog :appDialog="appDialog">
        <div class="upper">
            <div>员工每日添加上限</div>
            <el-input-number v-model="upper" style="width: 130px" class="mx-4" :min="0" controls-position="right" />
        </div>
    </Dialog>
    <!-- <ZWPagination @submit="page" ref="PaginationRef"></ZWPagination> -->
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';
import { Picture as IconPicture, Search } from '@element-plus/icons-vue';
import { ElMessage, ElTable } from 'element-plus';
import router from '@/router';
// import ZWPagination from "@/components/ZWPagination.vue";
import Dialog from '@/components/Dialog.vue';
import { useStore } from '@/store';
import bus from '@/utils/bus';
import { getSetionId } from '@/utils/utils';
const store = useStore();
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const title = ref(); // 弹框标题
const message = ref(); //弹框提示内容
const cusTotal = ref(1); // 表格的总人数
const customer = ref([]); // 选中的删除客户
const searchKeyWord = ref(); // 表格搜索关键字
const params = ref({}); // 传递的参数
const props = defineProps(['allCusList']);

const filterData = ref<any>([]); // 搜索过滤的数据
const handleSelectionChange = (val: any) => {
    const arr = [];
    val.map((item: any) => {
        arr.push(item.id);
    });
    customer.value = arr;
};
const online_limit = ref<any>([]);
const upper = ref(0);
// 获取删除列表数据
const batchSet = () => {
    online_limit.value = [];
    appDialog.visible = true;
};
// 改变上限
const handleChange = (row: any) => {
    console.log(row, '23');
    filterData.value.map((item: any, index: any) => {
        const num = online_limit.value.findIndex(i => i.user_id === row.id);
        if (num !== -1) {
            online_limit.value[num].limit = row.limit;
        }
    });
};
// const changeUp
// 分页信息
const page = (data: any) => {
    params.value.page = data.page;
    params.value.page_size = data.page_size;
    getList(params.value);
};
// 弹框取消
const cancelHandel = () => {
    upper.value = 0;
    appDialog.visible = false;
    online_limit.value = filterData.value.map((item: any) =>
        Object.assign({}, { user_id: item.id, limit: item.limit })
    );
};
// 弹框确认按钮
const submitHandel = () => {
    customer.value.map((item: any) => {
        const index = filterData.value.findIndex((i: any) => i.id === item);
        filterData.value[index].limit = upper.value;
        online_limit.value.push({ user_id: item, limit: upper.value });
    });
    online_limit.value = filterData.value.map((item: any) =>
        Object.assign({}, { user_id: item.id, limit: item.limit })
    );

    cancelHandel();
};
const fatherData = (data: any, tagId?: any, isClose?: any) => {
    if (data.length <= 0) {
        online_limit.value = [];
    }
    if (isClose === 1) {
        const index = online_limit.value.findIndex((i: any) => i.user_id == tagId);
        online_limit.value.splice(index, 1);
        filterData.value = filterData.value.filter((i: any) => i.id != tagId);
    } else if (isClose === 2 && tagId instanceof Array) {
        filterData.value = filterData.value.filter((i: any) => !tagId.includes(i.id));
    } else {
        const arr = getSetionId('id', filterData.value);
        const res = data.filter((item: any) => !arr.includes(item.id));
        filterData.value = Array.from(new Set([...filterData.value, ...res]));
        const resArr = getSetionId('id', data);
        const cut = filterData.value.filter((i: any) => resArr.includes(i.id));
        filterData.value = cut;
        online_limit.value = filterData.value.map((item: any) =>
            Object.assign({}, { user_id: item.id, limit: item.limit })
        );
    }
};
// 弹框配置项
const appDialog = reactive({
    visible: false,
    title: '批量设置',
    width: '800px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
});
watch(
    () => props.allCusList,
    val => {
        online_limit.value = [];
        val.map((item: any) => {
            if (item.limit) {
                online_limit.value.push({ user_id: item.id, limit: item.limit });
                console.log(1, online_limit.value);
            } else {
                console.log(2);
                item.limit = 0;
                online_limit.value.push({ user_id: item.id, limit: 0 });
            }
        });
        if (val.length) {
            fatherData(val);
        } else {
            filterData.value = val;
        }
    },
    { immediate: true }
);
watch(
    () => searchKeyWord.value,
    () => {
        filterData.value = props.allCusList.filter((item: any) => {
            // store.dispatch("pageTotal", filterData.value.total);
            return item.name.indexOf(searchKeyWord.value) != -1;
        });
    },
    { deep: true }
);

defineExpose({
    fatherData,
    customer,
    filterData,
    params,
    online_limit
});
</script>
<style scoped lang="scss">
.search_input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 20px;

    .keyword {
        width: 280px;
    }
}

.tableData {
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #eaeaea;

    .cusInfo {
        display: flex;
        align-items: center;

        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 4px;

            .image-slot {
                .el-icon {
                    font-size: 36px;
                }
            }
        }

        .name {
            margin: 0 5px;
        }

        .channel {
            font-size: 14px;
            color: #60b900;
        }

        .sex {
            width: 18px;
            height: 18px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .handle {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-left: 20px;

        .el-input-number {
            width: 107px;
        }
    }

    .tagList {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .tag_item {
            padding: 4px;
            color: #ff6b00;
            margin: 0 10px 10px 0;
            border-radius: 2px;
            border: 1px solid #ffc69e;

            &:nth-child(n + 6) {
                display: none;
            }
        }
    }

    .emty {
        margin-top: 130px;
        // display: flex;
        // flex-direction: column;
    }

    .emty_img {
        transform: translateX(15%);
    }

    .emty_title {
        margin-top: -50px;
    }
}

.conceal {
    display: flex;
    flex-wrap: wrap;

    &_tag_item {
        padding: 4px;
        color: #ff6b00;
        margin: 0 10px 10px 0;
        border-radius: 2px;
        border: 1px solid #ffc69e;
    }
}

:deep .searchItem {
    padding-bottom: 19px;
    border-bottom: 1px solid #eaeaea;
}

.upper {
    display: flex;
    align-items: center;
    padding: 27px 30px 35px;

    .el-input-number {
        width: 87px;
        margin-left: 16px;
    }
}
</style>
